<template>
  <div class="class">
    <!-- 上半部分 -->
    <div class="top">
      <h3>查询条件</h3>
      <div class="select">
        <el-select v-model="value" class="m-2" placeholder="全部"  @change="handleClick(value)">
          <el-option v-for="item in className.list" :key="item" :value="item" :label="item.label"/>
        </el-select>

        <span class="demonstration">创建日期：</span>
        <el-date-picker v-model="value1" type="date" placeholder="年/月/日" />

        <span class="demonstration">至：</span>
        <el-date-picker v-model="value1" type="date" placeholder="年/月/日"/>
      </div> 
    </div>
    <!-- 商品信息 -->
    <div class="section">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="id" label="品类ID" width="180" />
        <el-table-column prop="name" label="品类名称" width="180" />
        <el-table-column prop="date" label="创建时间" />
        <el-table-column prop="sonName" label="子品类" />
        <el-table-column prop="data" label="操作" >
          <template #default="scope">
            <el-button type="primary" :icon="Edit"  size="small" @click="editRow(scope.row)"/>
            <el-button type="success" :icon="Share"   size="small" @click="watchRow(scope.row)"/>
            <el-button type="danger" :icon="Delete"   size="small" @click="deleteRow(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

import { onMounted, reactive,ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
//实例化路由管理对象
var $router = useRouter();
// select框
var className = reactive({list:[]})

// 符合搜索条件的
var search = reactive({ list: []})


//定义响应式数据
var tableData = reactive({ list: [] })
var editlist = reactive({})
var value1 = ref()
var value = ref()


onMounted(() => {
  axios.get('/api/class/list').then((res) => {
    tableData.list = res.data.list;
  })
  axios.get('/api/select/list').then((res) => {
    res.data.list.forEach((item)=>{
      if(className.list.indexOf(item.name) == -1){
        className.list.push(item.name)
      }
    })
    localStorage.setItem('select_list', JSON.stringify(className.list));
    return className.list;
  })  
})


//定义函数 - 删除数据
var deleteRow = (row) => {
  axios.post('/api/class/delete', { id: row.id }).then((res) => {
    // console.log('delete', res.data);
    tableData.list = res.data.list;
    console.log(tableData.list)
  })
}


// 编辑
var editRow = (row) => {
  // console.log(row)
  editlist = row
  // console.log(editlist)
  $router.push({path:'/maxindex/classedit/',query:{id:JSON.stringify(row)}})
}
// 查看
var watchRow = (row) => {
  $router.push({path:'/maxindex/classwatch/',query:{id:JSON.stringify(row)}})
}


// 发请求获取符合条件的
var handleClick = (value) => {
  axios.get('/api/search/list').then((res) => {
    res.data.list.forEach((item)=>{
      // console.log(item.name,value)
      if(item.name == value){
        search.list.push(item)
      }
    })
    localStorage.setItem('search_list', JSON.stringify(search));
    console.log("搜索",search)
    $router.push({path:'/maxindex/search',query:{id: JSON.stringify(search.list)}})
    return search.list;
  })
}


</script>

<style>
.el-main>.class{
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
}
.el-main>.class>.top{
  z-index: 10;
  width: 1200px;
  height: 120px;
  background-color: #f2f2f2;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 30px;
  position: fixed;
  top: 50px;
}
.el-main>.class>.top>.select{
  display: flex;
  justify-content: space-between;
}

.el-main>.class>.section{
  margin-top: 160px;
  width: 1200px;
  background-color: #f2f2f2;
  height: 700px;
}
.el-main>.class>.section .el-table__inner-wrapper{
  position: fixed;
}
.el-main>.class>.top>.select{
  margin-top: 14px;
}

</style>